<template>
  <view class="tabs">
    <scroll-view
      id="tab-bar"
      class="scroll-tab width100 height100"
      :scroll-x="true"
      :show-scrollbar="false"
    >
      <view
        class="tab-bar-box"
        :class="{
          'is-scroll': scroll,
          'is-start': start,
          'hide-active': hideActive,
        }"
      >
        <view
          v-for="(item, index) in tabBars"
          :key="index"
          class="tab-item"
          :id="item.value"
          :data-current="index"
          @click="ontabtap"
        >
          <text
            class="tab-item-title"
            :class="{ 'tab-item-actived': index == tabIndex }"
            :style="{
              color:
                index == tabIndex
                  ? textActived
                    ? color || mainColor
                    : null
                  : defaultColor || null,
            }"
            >{{ item.label }}</text
          >
          <view class="has-count" v-if="item.count">{{ item.count }}</view>
        </view>
        <view
          v-if="!hideActive"
          class="tab-active"
          :style="{
            width: chooseWidth - 12 + 'px',
            left: chooseLeft + 6 + 'px',
            backgroundColor: color || mainColor,
          }"
        ></view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  components: {},
  props: {
    tabBars: {
      type: Array,
      default() {
        return [];
      },
    },
    value: {
      type: [Number, String],
      default: 0,
    },
    scroll: {
      type: Boolean,
      default: false,
    },
    start: {
      type: Boolean,
      default: false,
    },
    hideActive: {
      type: Boolean,
      default: false,
    },
    textActived: {
      type: Boolean,
      default: false,
    },
    color: {
      type: [String, Object],
      default: null,
    },
    defaultColor: {
      type: [String, Object],
      default: null,
    },
  },
  data() {
    return {
      tabIndex: this.value,
      chooseWidth: 0,
      chooseLeft: 0,
    };
  },
  computed: {
    mainColor() {
      return "#4E6EF2";
    },
  },
  watch: {
    value(v) {
      this.tabIndex != v ? (this.tabIndex = v) : null;
      this.setActive();
    },
  },
  onLoad() {},
  mounted() {
    this.setActive();
  },
  methods: {
    ontabtap(e) {
      let choose = e.target.dataset.current || e.currentTarget.dataset.current;
      this.tabIndex = choose;
      this.$emit("input", choose);
      this.setActive();
    },
    setActive() {
      this.$nextTick(() => {
        let query = uni.createSelectorQuery().in(this);
        query.selectAll(".tab-item-actived").boundingClientRect();
        query.exec((res) => {
          try {
            this.chooseWidth = res[0][0].width;
            console.log(this.chooseWidth);
            this.chooseLeft = res[0][0].left;
            console.log(this.chooseLeft);
          } catch (error) {}
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  width: 100%;
  max-width: 800rpx;
  height: 80rpx;
  .scroll-tab {
    .tab-bar-box {
      position: relative;
      height: 100%;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-evenly;
      align-items: center;
      padding: 0 10rpx;
      box-sizing: border-box;
      overflow: hidden;
      &.is-scroll {
        width: auto;
        justify-content: flex-start;
      }
      &.is-start {
        justify-content: flex-start;
      }
      &.hide-active {
        .tab-item-title {
          color: #333333;
          transition: all 0.2s ease;
          &.tab-item-actived {
            color: #1e1e1e;
          }
        }
      }
      .tab-item {
        position: relative;
        margin-top: -6rpx;
        .tab-item-title {
          margin: 0 20rpx;
          font-size: 30rpx;
          line-height: 40rpx;
        }
        .has-count {
          position: absolute;
          top: -8rpx;
          left: 100%;
          margin-left: -28rpx;
          min-width: 36rpx;
          padding: 0 4rpx;
          height: 36rpx;
          box-sizing: border-box;
          text-align: center;
          line-height: 32rpx;
          border-radius: 18rpx;
          color: #e70012;
          background-color: #ffe0e0;
          border: 1px solid #e70012;
          font-size: 24rpx;
          transform: scale(0.8);
        }
      }
      .tab-active {
        height: 8rpx;
        background-color: #1e1e1e;
        transition: all 0.2s ease;
        border-radius: 4rpx;
        /* #ifdef H5 */
        position: fixed;
        top: 160rpx;
        /* #endif */
        /* #ifndef H5 */
        position: absolute;
        bottom: 0rpx;
        /* #endif */
      }
    }
  }
}
</style>
